<!--/* Copyright 2017, Huawei Technologies Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*    http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->


<h4>{{title}}</h4>

<br><br>
<div id="portAction" ng-init="init()">

</div>
<br>
<br>

<table ng-table="portTableParams" class="table table-bordered table-striped customtable" show-filter="true">
    <tr ng-repeat="portData in $data">
        <td header="'ng-table/headers/checkbox.html'">
            <input type="checkbox" ng-model="checkboxes.items[portData.id]" />
        </td>
        <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
            {{portData.name}}
        </td>
        <td title="'ME'" filter="{ meID: 'number'}" sortable="'meID'">
            {{portData.meID}}
        </td>
        <td title="'Type'" filter="{ logicalType: 'text'}" sortable="'logicalType'">
            {{portData.logicalType}}
        </td>
        <td title="'LayerRate'" filter="{ layerRate: 'text'}" sortable="'layerRate'">
            {{portData.layerRate}}
        </td>
        <td title="'Edge Point'" filter="{ isEdgePoint: 'text'}" sortable="'isEdgePoint'">
            {{portData.isEdgePoint}}
        </td>
        <td title="'Port Index'" filter="{ portIndex: 'text'}" sortable="'portIndex'">
            {{portData.portIndex}}
        </td>
        <td title="'IP Address'" filter="{ ipAddress: 'number'}" sortable="'ipAddress'">
            {{portData.ipAddress}}
        </td>
        <td title="'Admin State'" filter="{ adminState: 'text'}" sortable="'adminState'">
            {{portData.adminState}}
        </td>
        <td title="'Operating State'" filter="{ operState: 'text'}" sortable="'operState'">
            {{portData.operState}}
        </td>
        <td title="'Action'">
            <span  ng-click="editData(portData.id)" style="cursor: pointer;margin: 0 5px"> <img src="/openoui/framework/browser/thirdparty/images/edit.png" height="15" align="left"/></span>
            <span  ng-click="deleteData(portData.id)" style="cursor: pointer;margin: 0 5px"><img src="/openoui/framework/browser/thirdparty/images/delete.png" height="15" align="middle"/></span>

        </td>
    </tr>
</table>


<script type="text/ng-template" id="ng-table/headers/checkbox.html">
    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
</script>

<div id="myTable"></div>




<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title">Create Port</h5>
            </div>
            <form  name="portForm" method="post">
               <div class="modal-body" id="borderSpacing">

                <div class="form-group row" id="rowSpacing">
                    <label class="col-xs-4 col-form-label" id="textCenter">Name</label>
                    <div id="name" class="col-xs-8">
                    </div>
                </div>

                <div class="form-group row" id="rowSpacing">
                    <label class="col-xs-4 col-form-label" id="textCenter">ME</label>
                    <div id="meID" class="col-xs-8" >
                     <select id="medropdown" class="form-control inputfield" ng-model="port.meID"></select>
                    </div>
                </div>
                <div class="form-group row" id="rowSpacing">
                    <label class="col-xs-4 col-form-label" id="textCenter">Type</label>
                    <div id="logicalType" class="col-xs-8" >
					 <select id="portdropdown" class="form-control inputfield" ng-model="port.logicalType" ng-options="item.templateName for item in optionsValue"></select>
                    </div>
                </div>
                <div class="form-group row" id="rowSpacing">
                    <label class="col-xs-4 col-form-label" id="textCenter">Layer Rate</label>
                    <div id="layerRate" class="col-xs-8" >
                    </div>
                </div>
                <div class="form-group row" id="rowSpacing">
                    <label class="col-xs-4 col-form-label" id="textCenter">Edge Point</label>
                    <div id="isEdgePoint" class="col-xs-8" >
					<select id="portEdropdown" class="form-control inputfield" ng-model="port.isEdgePoint" ng-options="item.templateName for item in optionsValue"></select>
                    </div>
                </div>
                <div class="form-group row" id="rowSpacing">
                    <label class="col-xs-4 col-form-label" id="textCenter">Port Index</label>
                    <div id="portIndex" class="col-xs-8" >
                    </div>
                </div>
                <div class="form-group row" id="rowSpacing">
                    <label class="col-xs-4 col-form-label" id="textCenter">Ip Address</label>
                    <div id="ipAddress" class="col-xs-8" >
                    </div>
                </div>
                   <div class="form-group row" id="rowSpacing">
                       <label class="col-xs-4 col-form-label" id="textCenter">Native ID</label>
                       <div id="nativeId" class="col-xs-8" >
                       </div>
                   </div>

                <div id="footerBtns" class="modal-footer">
                </div>
            </form>
        </div>


    </div>
</div>